<!--/**
 * Plugin Name: 论坛展示型app
 * Description: uloug.com To develop and share! Please keep the copyright information!
 * Author: 拾讯网
 * Author URI: http://www.uloug.com
 * Version: 1.0
 * Plugin URI: https://git.oschina.net/858598758/apicloud.mao10.app.demo.git
 * License: GPL2+
 */-->
<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-slide.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
		<style>
			.box [class*=aui-flex-]:not(.aui-flex-col) {
			background-color: rgba(26, 188, 156, 0.5);
			color: #ffffff;
			font-size: 12px;
			}
			.box.nobg [class*=aui-flex-]:not(.aui-flex-col){
			background: #ffffff;
			}
			.box.bottom {
				margin-bottom: 15px;
			}
			img {
				width: 100%;
			}
			.aui-border-t:after, .aui-border-b:after, .aui-border-l:after, .aui-border-r:after, .aui-border-tb:after, .aui-border:after {
				border-color: #e0e0e0;
			}
			.demo-box {
				height: 300px;
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
			}
			.demo-box::-webkit-scrollbar {
				width: 0px;
				height: 0px;
				visibility: hidden;
			}
			.img-list {
				padding: 2px 2px 0 2px;
			}
			.img-list > div {
				padding: 2px 2px 0 2px;
			}
			.img-list img {
				display: block;
			}
			/*
			 .aui-list-view.aui-grid-view .aui-list-view-cell:after {
			 border-top: 1px solid #e0e0e0;
			 }*/
			#shop-home-goods .aui-img-body > span {
				height: 40px;
				overflow: hidden;
				text-overflow: clip;
				display: block;
			}
			#shop-home-goods .aui-img-body > strong {
				text-align: left;
				display: block;
				margin: 2px 0 0 5px;
				color: #ff3c25;
				font-size: 16px;
			}
			#shop-home-goods .aui-img-body > strong > em {
				font-family: Arial, 'Microsoft YaHei';
				font-size: 12px;
				font-weight: 400;
			}
			/*aui-xiu*/
			.aui-list-view.aui-grid-view .aui-list-view-cell {
				padding: 10px;
			}
			.aui-list-view.aui-grid-view {
				padding: 0;
			}
			img.loading {
				width: 100%;
				background: url('image/img-fo.gif') no-repeat center center;
				background-color: #fff;
			}
			/*热门商品*/
			.aui-content.box {
				background: #fff;
			}
			.box {
				/*padding-top: 15px;*/
			}
			.box-title {
				margin: 15px 10px 5px 10px;
				/*margin-bottom: 5px;*/
				height: 20px;
				line-height: 20px;
				border-left: 5px solid #ff9900;
				color: #666;
				font-weight: 700;
				padding-left: 10px;
			}
			.box .aui-list-view {
				margin-bottom: 0;
			}
			.aui-list-view i.aui-iconfont {
				margin-right: 0;
			}
		</style>
	</head>
	<body>
		<!--轮播图-->
		<div class="aui-content">
			<div id="aui-slide">
				<div class="aui-slide-wrap" >
					<div class="aui-slide-node bg-dark">
						<img src="http://d9.yihaodianimg.com/N07/M08/29/37/CgQI0Fc-zcyAES-NAAJMfv8Cfuo60000_749x240.jpg">
					</div>
					<div class="aui-slide-node bg-dark">
						<img src="http://d7.yihaodianimg.com/N05/M05/32/F8/ChEbulc-xlyASlexAAJd_X0TBcE64400_749x240.jpg">
					</div>
					<div class="aui-slide-node bg-dark">
						<img src="http://d6.yihaodianimg.com/N10/M0A/AF/4F/ChEi21dCyfCAQylZAAHskvI96To11300_749x240.jpg">
					</div>
					<div class="aui-slide-node bg-dark">
						<img src="http://d9.yihaodianimg.com/N05/M04/D7/23/CgQI0lc-u3eADG-PAAG71KF5HEU32800_749x240.jpg">
					</div>
				</div>
				<div class="aui-slide-page-wrap">
					<!--分页容器-->
				</div>
			</div>
		</div>
		<div class="aui-content">
			<div class="box bottom nobg ">
				<div class="aui-flex-col aui-flex-center aui-border-tb">
					<div class="aui-flex-item-4 aui-flex-row aui-flex-middle aui-padded-10">
						<h3 class="aui-text-danger">淘抢购</h3>
						<p>
							可爱的你会喜欢
						</p>
						<img src="../../image/f0.png">
					</div>
					<div class="aui-flex-item-8 aui-border-l">
						<div class="aui-flex-col aui-padded-10 aui-border-b">
							<div class="aui-flex-item-12">
								<div class="aui-flex-item-9">
									<h3 class="aui-text-info">有好货</h3>
									<p>
										好品味从挑剔开始
									</p>
								</div>
								<div class="aui-flex-item-3 aui-text-right"><img src="../../image/f3.png">
								</div>
							</div>
						</div>
						<div class="aui-flex-col">
							<div class="aui-flex-item-6 aui-padded-10" style="position: relative;">
								<h5 class="aui-text-warning">爱逛街</h5>
								<p>
									疯狂赛车来袭
								</p>
								<img src="../../image/f1.png">
							</div>
							<div class="aui-flex-item-6 aui-padded-10 aui-border-l">
								<h5 class="aui-text-success">必买清单</h5>
								<p>
									都帮你整理好啦
								</p>
								<img src="../../image/f2.png">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="aui-content box">
			<div class="aui-line-x"></div>
			<div class="box-title">
				热门商品
			</div>
			<ul id="shop-home-goods" class="aui-list-view aui-grid-view"></ul>
			<div class="aui-line-x"></div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-slide.js"></script>
	<script type="text/javascript" src="../../script/common_do.js"></script>
	<script type="text/javascript" src="../../script/echo.min.js"></script>
	<script>
		var slide = new auiSlide({
			container : document.getElementById("aui-slide"),
			// "width":300,
			"height" : 150,
			"speed" : 300,
			"autoPlay" : 3000, //自动播放
			"pageShow" : true,
			"pageStyle" : 'dot',
			"loop" : true,
			'dotPosition' : 'center',
			currentPage : currentFun
		})
		function currentFun(index) {
			console.log(index);
		}

		apiready = function() {
			//网络判断
			appnetwork();
		}
		//有网时打开
		function network_yes() {
			//下拉刷新
			var set_Header_html = function(ret, err) {
				loadData(1, true);
				// 第一次加载
				api.refreshHeaderLoadDone();
			};
			api.setCustomRefreshHeaderInfo(set_Header_text, set_Header_html);
			api.refreshHeaderLoading();
			//定义第一次加载
			$api.setStorage("currentPage", 1);
			//上拉加载
			//@home-list 所有页码
			var home_list = 10;
			api.addEventListener({
				name : 'scrolltobottom',
				extra : {
					threshold : 0 //设置距离底部多少距离时触发，默认值为0，数字类型
				}
			}, function(ret, err) {
				var _page = parseInt($api.getStorage("currentPage"));
				if (_page + 1 <= home_list) {
					loadData(_page + 1, false);
					$api.setStorage("currentPage", _page + 1);
					// 页码+1
				} else {
					alert("没有更多数据了！");
				}
			});
		}

		// 默认设置为第一页
		// 加载数据
		// @currentPage:当前页码
		// @isReload：是否为刷新操作
		function loadData(currentPage, isReload) {
			api.showProgress({
				title : '加载中...',
				modal : false
			});
			var page_size = 10;
			currentPage = isReload ? 1 : currentPage;
			api.ajax({
				url : goods_url_id + goods_url_list,
				method : 'get',
				timeout : 30,
				cache : true,
				dataType : 'json',
				returnAll : false
			}, function(ret, err) {
				if (ret) {
					if (isReload) {
						$api.setStorage("currentPage", 1);
						// 重新设置为1
					}
					//数据填充
					var oja_goods = $api.byId('shop-home-goods');
					var html_goods = '';
					for (var i = 0; i < ret.length; i++) {
						var thisItem = ret[i];
						var newurl = thisItem.android_click_url
						html_goods += '<li class="aui-list-view-cell aui-img aui-col-xs-6 aui-boder" tapmode onclick="goods_win(' + thisItem.num_iid + ')">'
						html_goods += '<img class="aui-img-object loading" src="http://image.yihaodianimg.com/front-homepage/global/images/blank.gif" data-echo="' + thisItem.pic_url + '">'
						html_goods += '<div class="aui-img-body">'
						html_goods += '<span>' + thisItem.title + '</span>'
						html_goods += '<strong><em>￥</em>' + thisItem.coupon_price + '</strong>'
						html_goods += '</div>'
						html_goods += '</li>'
					}
					//当前页码为 1
					//填充新数据
					if (currentPage == 1) {
						$api.html(oja_goods, html_goods);
						echoInit();
						//图片延迟加载
						api.hideProgress();
					};
					//当前页码大于 1
					//加载数据到最后一行
					if (currentPage > 1) {
						$api.append(oja_goods, html_goods);
						echoInit();
						//图片延迟加载
						api.hideProgress();
					}
					api.refreshHeaderLoadDone();
				} else {
					alert(JSON.stringify(err));
					api.hideProgress();
				}
			});
		}

		//打开商品详情页
		//goodsid 传入ID值
		function goods_win(goodsid) {
			api.openWin({
				name : 'goods_win',
				url : 'goods_win.html',
				bounces : false,
				pageParam : {
					goodsid : goodsid
				},
				slidBackType : false,
				slidBackEnabled : true,
				vScrollBarEnabled : false
			});
		}
	</script>
</html>